<!--
* @author wn
* @date 2024/02/20 17:02:26
* @description: 首页
!-->
<template>
	<!-- 头部导航栏 -->
	<navbar :isHome="true" />
	<!-- 公告区域 -->
	<view class="notice">
		<view class="weui-cell">
			<view class="weui-cell-hd">
				<image src="/static/images/ic_myapp.png" mode="aspectFit" />
			</view>
			<view class="weui-cell-bd">
				<text>点击右上角"添加到我的小程序",方便下次找到！</text>
			</view>
			<view class="weui-cell-ft">
				<image src="/static/images/modal_closer.png" mode="aspectFit" />
			</view>
		</view>
	</view>
	<!-- 轮播图 -->
	<swiper
		v-if="sliders.length > 0"
		class="index-swiper"
		autoplay
		circular
		:interval="3000"
		:duration="500"
	>
		<swiper-item v-for="(item, index) in sliders" :key="item.id">
			<image
				:src="item.pic_image_url"
				mode="widthFix"
				show-menu-by-longpress
				:data-index="index"
			>
			</image>
		</swiper-item>
	</swiper>
	<!-- 两个快捷入口 -->
	<view v-if="nav2.length > 0" class="nav2-list">
		<image
			v-for="item in nav2"
			:key="item.id"
			:src="item.pic_image_url"
			mode="widthFix"
			@tap="onNavHandle(item.stype, item.stype_link)"
		/>
	</view>
	<!-- 多个快捷入口 -->
	<view v-if="navS.length > 0" class="navs-list">
		<view
			v-for="item in navS"
			:key="item.id"
			class="navs-item"
			@tap="onNavHandle(item.stype, item.stype_link)"
		>
			<image :src="item.pic_image_url" mode="widthFix" />
			<text :style="{ color: item.tcolor || '#000' }"> {{ item.title }}</text>
		</view>
	</view>
	<!-- 医院列表 -->
	<view
		class="hospital-list"
		:style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
	>
		<navigator
			v-for="item in hospitalList"
			:key="item.id"
			:url="`/pages/hospital/index?hid=${item.id}`"
			hover-class="none"
			class="hospital-item"
		>
			<image
				:src="item.avatar_url || '/static/images/avatar.jpg'"
				mode="aspectFill"
			>
			</image>
			<view class="weui-cell-bd">
				<view class="hosp-name">{{ item.name }}</view>
				<text class="hosp-rank">{{ item.rank }}</text>
				<text class="hosp-label">{{ item.label }}</text>
				<view class="hosp-intro">{{ item.intro }}</view>
			</view>
		</navigator>
	</view>
	<!--  -->
	<!--  -->
</template>
<script setup>
import { getAidApi, getBannerApi } from '@/api/home'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 获取当前实例  this
const app = getApp()
onLoad(() => {
	app.globalData.userInfo.getUserInfo()
	getInitData()
})

// 安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()

// 获取轮播图数据
const sliders = ref([])
// 两个快捷入口数据
const nav2 = ref([])
// 多个快捷入口数据
const navS = ref([])
// 医院列表数据
const hospitalList = ref([])
const getInitData = async () => {
	// 获取 aid
	const { area } = await getAidApi()
	const { slides, nav2s, navs, hospitals } = await getBannerApi(area.id)
	sliders.value = slides
	nav2.value = nav2s
	navS.value = navs
	hospitalList.value = hospitals
}

// 两个快捷入点击事件
const onNavHandle = (stype, url) => {
	// 是否为内部链接
	if (stype !== '1') return
	uni.navigateTo({ url })
}
</script>
<style lang="scss">
.notice {
	margin-top: 160rpx;
}
.weui-cell {
	background-color: #fff9ed;
}
.weui-cell-hd {
	image {
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin-right: 14rpx;
	}
}
.weui-cell-bd {
	text {
		color: #be9719;
		font-size: 26rpx;
	}
}
.weui-cell-ft {
	image {
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin-left: 14rpx;
	}
}
// 轮播图
.index-swiper {
	overflow: hidden;
	height: 320rpx;
	margin: 20rpx 20rpx 0;
	border-radius: 10rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
// 两个快捷入口
.nav2-list {
	display: flex;
	margin: 16rpx 20rpx 0rpx;
	image:first-child {
		margin-right: 18rpx;
	}
}
// 多个个快捷入口
.navs-list {
	display: flex;
	justify-content: space-between;
	margin: 16rpx 20rpx 0rpx;
	.navs-item {
		width: 120rpx;
		image {
			width: 100%;
		}
		text {
			display: block;
			text-align: center;
			font-size: 24rpx;
			font-weight: bold;
		}
	}
}
// 医院列表
.hospital-list {
	margin: 16rpx 20rpx 0;
	background-color: #fff;
	.hospital-item {
		display: flex;
		margin-bottom: 20rpx;
		padding: 20rpx;
		box-shadow: 1px 2px 3px 2px rgba(0, 0, 0, 0.16);
		image {
			width: 200rpx;
			height: 180rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.weui-cell-bd {
			flex: 1;
			font-weight: bold;
			.hosp-name {
				font-size: 34rpx;
			}
			.hosp-rank {
				color: #0bb585;
				margin-right: 16rpx;
			}
			.hosp-label {
				color: #0ca7ae;
			}
			.hosp-intro {
				color: #999999;
				font-weight: normal;
				font-size: 26rpx;
			}
		}
	}
}
</style>
